<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>提交订单</title>
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<!--标准mui.css-->
	<link rel="stylesheet" href="../css/mui.min.css">
	<link rel="stylesheet" href="../css/common.css" />
	<link rel="stylesheet" type="text/css" href="../css/mui.picker.min.css" />
	<style>
		body,.mui-content {
			background: #fff;
		}
		.mui-bar-nav {
			background: #86CAF9;
		}
		.mui-bar .mui-icon {
			color: #fff;
		}
		.mui-title {
			color: #fff;
		}
		.use-time {
			margin-top: 12px;
			display: flex;
			align-items: center;
		}
		.prompt-title {
			margin-left: 12px;
			font-size: 15px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #666;
		}
		.use-time .mui-btn {
			background: #DAEFFD;
		}
		.dividing-line {
			margin-top: 12px;
			width: 100%;
			height: 10px;
			background: #efeff4;
		}
		.buy-number {
			margin-top: 22px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.mui-numbox {
			margin-right: 20px;
		}
		.input-info {
			margin-top: 20px;
			display: flex;
			align-items: baseline;
		}
		.input-info input {
			width: 200px;
			margin-bottom: 0;
			border: none;
			border-bottom: 1px solid #E5E5E5;
			font-size: 14px;
		}
		.input-info .prompt-title {
			width: 80px;
		}
		.mui-bar-tab {
			padding: 0 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-shadow: 0 0 1px rgba(91,169,249,0.6);
		}
		.total-price {
			font-size:12px;
			font-family:PingFang SC;
			color: #333;
		}
		.price-value {
			font-size: 16px;
			font-family:PingFang SC;
			font-weight:bold;
			color: #FE9F00;
		}
		.buy-btn {
			background: linear-gradient(90deg, #FFA308 0%, #FF7E05 100%);
			color: #fff;
		}
		.mui-bar .mui-btn {
			top: 0;
		}
	</style>
</head>
<body>
	<header id="header" class="mui-bar mui-bar-nav">
		<h1 class="mui-title">提交订单</h1>
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	</header>
	<nav class="mui-bar mui-bar-tab">
		<div class="total-price">
			总价¥ <span id="totalPrice" class="price-value">0</span>
		</div>
		<button id="addOrder" type="button" class="mui-btn buy-btn">立即购买</button>
	</nav>
	<div class="mui-content">
		<div class="use-time">
			<div class="prompt-title">使用日期：</div>
			<button id='picker' data-options='{"type":"date"}' class="btn mui-btn">选择日期 ...</button>
		</div>
		<div class="dividing-line"></div>
		<div class="buy-number">
			<div class="prompt-title">购买数量：</div>
			<div class="mui-numbox" data-numbox-min='1'>
				<button class="mui-btn mui-btn-numbox-minus" type="button">-</button>
				<input id="goodsNumber" class="mui-input-numbox" type="number" />
				<button class="mui-btn mui-btn-numbox-plus" type="button">+</button>
			</div>
		</div>
		<div style="margin-top: 30px;" class="prompt-title">填写联系人信息</div>
		<div class="input-info">
			<div class="prompt-title">联系人：</div>
			<input id="userName" type="text" placeholder="请输入联系人姓名">
		</div>
		<div class="input-info">
			<div class="prompt-title">手机号码：</div>
			<input id="phone" type="number" placeholder="请输入手机号码">
		</div>
	</div>
	<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.picker.min.js"></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript" src="../js/utils/regular.js"></script>
	<script type="text/javascript" src="../js/utils/boot.js?version=1" ></script>
	<script>
		mui.init();
		var customerId = base.getParameter("customerId");
		var objId = base.getParameter("objId");
		var price = base.getParameter("price");
		var payType = base.getParameter("payType");
		var ticketType = base.getParameter("ticketType");
		var totalPrice = 0;
		(function($) {
			totalPrice = price;
			jQuery("#totalPrice").html(totalPrice);
			//初始化微信 用于支付
			base.initWX(function () {});
			//获取时间
			$("#picker").each(function(i, btn) {
				btn.addEventListener('tap', function() {
					var _self = this;
					if(_self.picker) {
						_self.picker.show(function (rs) {
	//						result.innerText = '选择结果: ' + rs.text;
							_self.innerText = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					} else {
						var optionsJson = this.getAttribute('data-options') || '{}';
						var options = JSON.parse(optionsJson);
				
						_self.picker = new $.DtPicker(options);
						_self.picker.show(function(rs) {
							
	//						result.innerText = '选择结果: ' + rs.text;
							_self.innerText = rs.text;
							_self.picker.dispose();
							_self.picker = null;
						});
					}
					
				}, false);
			});
		})(mui);
		//购买数量改变
		$("#goodsNumber").on('change', function() {
			totalPrice = price * $(this).val();
			jQuery("#totalPrice").html(totalPrice);
		});
		//下单支付
		$("#addOrder").on('tap', function() {
			if ($("#picker").html().indexOf("选择日期") != -1) {
				mui.toast("请选择出现日期");
				return;
			}
			if ($("#userName").val() == null || $("#userName").val() == '') {
				mui.toast("请填写联系人姓名");
				return;
			}
			if (!testPhone($("#phone").val())) {
				mui.toast("请输入正确的号码");
				return;
			}
			var data = {
				customerId: customerId,
				objId: objId,
				price: totalPrice,
				number: $("#goodsNumber").val(),
				payType: payType,
				travelDate: $("#picker").html(),
				name: $("#userName").val(),
				phone: $("#phone").val(),
				ticketType: ticketType
			}
			base.postData(base.url.addVisaTravelOrder, data, function(data) {
				if (data.success) {
					var orderNo = data.extendData.orderNo;
					var isWechat = base.isOnWx();
					var params = {
						orderNo: orderNo,
						customerId: customerId
					}
					if (isWechat) {
						base.weChatPayTravel(params, function(rse) {
							//支付成功
							mui.toast('支付成功');
							setTimeout(function() {
								window.location.href='admissionOrderList.html?customerId='+customerId+"&orderType=0";
							}, 1000)
						}, function() {
							//取消支付
						}, function() {
							//支付失败
							mui.toast('支付失败，请稍后再试！')
						});
					} else {
						base.postData(base.url.travelOrderPerpayH5,params,function(data) {
							var cfg = data.extendData;
							if (data.success) {
								if(data.extendData.mweb_url) {
									var urlPath = root_host+'ry_visa_web/pages/admissionOrderList.html?customerId='+customerId+"&orderType=0";
									window.location.href = data.extendData.mweb_url+'&redirect_url='+encodeURIComponent(urlPath);
								}
							} else {
								mui.toast(data.message);
							}
						});
					}
				} else {
					mui.toast(data.message);
				}
			});
		});
	</script>
</body>
</html>
